不同於stasis只是單純的轉換,
nanoc 有較多的功能快速建立管理網頁。
可執行的指令
nanoc 是 ruby 環境下的工具,只要執行 gem install nanoc 即可順利安裝,
看看可以有哪些指令的參數:
$ nanoc help
NAME
nanoc - nanoc, a static site compiler written in Ruby
USAGE
nanoc command [options] [arguments]
COMMANDS
autocompile start the autocompiler
check run issue checks
compile compile items of this site
create-item create an item
create-layout create a layout
create-site create a site
deploy deploy the compiled site
help show help
prune remove files not managed by nanoc from the output directory
shell open a shell on the nanoc environment
show-data show data in this site
show-plugins show all available plugins
show-rules describe the rules for each item
sync sync data sources
update update the data stored by the data source to a newer version
view start the web server that serves static files
watch start the watcher
(3 hidden commands ommitted; show them with --verbose)
OPTIONS
-C --no-color disable color
-V --verbose make nanoc output more detailed
-d --debug enable debugging
-h --help show the help message and quit
-l --color enable color
-v --version show version information and quit
-w --warn enable warnings
建立新的網站
$ nanoc create-site site2
create nanoc.yaml
create Rules
create content/index.html
create content/stylesheet.css
create layouts/default.html
Created a blank nanoc site at 'site2'. Enjoy!
所產生的目錄及檔案的分佈是:
$ tree
.
├── Rules
├── content
│ ├── index.html
│ └── stylesheet.css
├── layouts
│ └── default.html
├── lib
│ └── default.rb
├── nanoc.yaml
└── output
4 directories, 6 files
layouts裡放置了預設的樣版,
content 裡放置所要編的檔案,
output 是輸出完整HTML的位置。
lib 裡放置的檔案是在要編譯成HTML前,
來定義所要執行的動作。
nanoc.yaml定義了些哪些檔案目錄需要偵測或更新;
watcher:
dirs_to_watch: [ 'content', 'layouts', 'lib' ]
files_to_watch: [ 'nanoc.yaml', 'Rules' ]
當什麼都不編輯時,
nanoc compile 即會把 content 裡的 html 檔案,
結合 layouts/default.html 輸出完整的 HTML 檔到 output 目錄裡。
這時再執行 $ nanoc view 就會出現:
[2013-10-02 14:04:42] INFO WEBrick 1.3.1
[2013-10-02 14:04:42] INFO ruby 2.0.0 (2013-06-27) [i686-linux]
[2013-10-02 14:04:42] INFO WEBrick::HTTPServer#start: pid=29316 port=3000
127.0.0.1 - - [02/Oct/2013 14:04:53] "GET / HTTP/1.1" 200 1811 0.0012
localhost - - [02/Oct/2013:14:04:53 CST] "GET / HTTP/1.1" 200 1811
表示正在跑一個 3000 port 的 web 服務,
這時 http://1.2.3.4:3000/ 就會看到此預設的頁面:
這是根據 layouts/default.html 的內容:
<html lang="en">
<meta charset="utf-8">
<title>A Brand New nanoc Site - <%= @item[:title] %></title>
<link rel="stylesheet" href="/style.css">
<!-- you don't need to keep this, but it's cool for stats! -->
<meta name="generator" content="nanoc <%= Nanoc::VERSION %>">
<div id="main">
<%= yield %>
</div>
<div id="sidebar">
<h2>Documentation</h2>
<ul>
<li><a href="http://nanoc.ws/docs/">Documentation</a></li>
<li><a href="http://nanoc.ws/docs/tutorial/">Getting Started</a></li>
</ul>
<h2>Community</h2>
<ul>
<li><a href="http://groups.google.com/group/nanoc/">Discussion Group</a></li>
<li><a href="irc://chat.freenode.net/#nanoc">IRC Channel</a></li>
<li><a href="http://github.com/nanoc/nanoc/wiki/">Wiki</a></li>
</ul>
</div>
再加上 content/index.html 所畫成的完整網頁:
---
title: Title
---
<h1>A Brand New nanoc Site</h1>
<p>You’ve just created a new nanoc site. The page you are looking at right now is the home page for your site. To get started, consider replacing this default homepage with your own customized homepage. Some pointers on how to do so:</p>
<ul>
<li><p><strong>Change this page’s content</strong> by editing the “index.html” file in the “content” directory. This is the actual page content, and therefore doesn’t include the header, sidebar or style information (those are part of the layout).</p></li>
<li><p><strong>Change the layout</strong>, which is the “default.html” file in the “layouts” directory, and create something unique (and hopefully less bland).</p></li>
</ul>
<p>If you need any help with customizing your nanoc web site, be sure to check out the documentation (see sidebar), and be sure to subscribe to the discussion group (also see sidebar). Enjoy!</p>
在 content/index.html 的最上頭 定義了 title 這個變數的值為 "Title",
取代替換 出現在 layouts/default.html 裡的 <%= @item[:title] %> 的內容,
有變數可運用,就能更彈性地來安排網頁內容。
新增頁面
產生新頁面用 $ nanoc create-item about 來產生一個 about 的頁面,
會多了一個 content/about.html 的檔案:
---
title: A New Item
---
Hi, I'm a new item!
把這檔案編輯後執行
$ nanoc co
Loading site data… done
Compiling site…
create [0.01s] /home/www/Default/htdocs/blog/about/index.html
Site compiled in 0.05s.
是產生 http://1.2.3.4:3000/about/ 或說是 http://1.2.3.4:3000/about/ 的頁面。
刪除頁面
假設不要 about 這頁面,
先是刪掉 content/about.html 檔,
這時 nanoc compile 並沒有什麼要更新,
也不會自動去清除掉 outputs/about/index.html 的內容,
因為 compile 的指令只會新增編譯,
但不做比對刪除的動作。
這時執行
$ nanoc prune --yes
Loading site data… done
delete output/about/index.html
delete output/about
去比對編輯來源目錄的檔案及輸出output裡的檔案,
會把output裡有,但來源目錄裡沒有的東西 予以刪除。
這種維護網站網頁的方式,
比stasis功能更多實用的功能,
得以更快速更新網頁。